<template>
  <div class="bod">
    <div class="bod-top">
		<div class="bod-left">
			<div>
				<img class="fengxian" src="../../../assets/img/fengxian.png" />
			</div>
			<div>行业风险一览</div>
		</div>
		<div class="bod-right">
			<div class="yuan" @click="pre()">
				<img class="jiantou" src="../../../assets/img/jiantou2.png" />
			</div>
			<div class="text">1/4</div>
			<div class="yuan" @click="next()">
				<img class="jiantou" src="../../../assets/img/jiantou.png" />
			</div>
		</div>
	</div>
	<div class="animal" :style="{animationName:animal}">
		<div class="bot-mid">
			<div class="bot-mid-one">
				<div>{{shengyu.title}}</div>
				<div class="bod-right">
					<div class="bod1">
						正序
					</div>
					<div class="bod2">
						倒叙
					</div>
				</div>
			</div>
			<div class="bot-mid-two">{{shengyu.neiron}}</div>
			<slot name="shengyu"></slot>
		</div>
		<slot name="yuantable"></slot>
	</div>
  </div>
</template>

<script>
export default {
    props: {
         shengyu:{
			 type:Object
		 }
    },
    data() {
        return {
            animal:'',
			index:0,
        }
    },
    methods: {
        pre(){
			
		},
		next(){
			// this.animal = 'animalname'+(this.index++)
			this.animal = 'animalname0'
			console.log(this.animal);
		}
    }
}
</script>
<style scoped lang="scss">
	.bod{
		width: 422px;
		height: 492px;
		background-color: #091344;
		border: 1px solid #222855;
		box-sizing: border-box;
	}
	
	.bod-top{
		display: flex;
		height: 46px;
		background-image: linear-gradient(to right, rgba(24,104,167,0.2), rgba(69,121,196,0));
		align-items: center;
		justify-content: space-between;
	}
	
	.bod-top .bod-left{
		display: flex;
	}
	
	.bod-top .bod-left div:nth-child(1){
		width: 17px;
		height: 18px;
		margin-left: 22px;
		margin-right: 8px;
	}
	
	.bod-top .bod-left div:nth-child(2){
		font-size: 16px;
		line-height: 16px;
		color: #57E0EC;
		margin-right: 22px;
	}
	
	.bod-top .bod-right{
		display: flex;
		margin-right: 22px;
		align-items: center;
		
		.text{
			margin: 0 13px;
			color: #FFFFFF;
		}
	}
	
	.bod-top .bod-right .yuan{
		width: 24px;
		height: 24px;
		border-radius: 25px;
		background-color: #222855;
		position: relative;
	}
	
	.bod-top .fengxian{
		width: 100%;
		height: 100%;
	}
	
	.jiantou{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	.bot-mid{
		margin-top: 34px;
		margin-left: 24px;
		margin-right: 24px;
	}
	
	.bot-mid-one{
		font-size: 20px;
		line-height: 20px;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 21px;
		display: flex;
		justify-content: space-between;
	}
	
	.bot-mid-two{
		color: #878b9f;
		font-size: 14px;
		line-height: 22px;
	}
	
	.animal{
		// animation-name: animalname0;
		animation-duration: 1s;
		animation-fill-mode: forwards;
	}
	
	@keyframes animalname0 {
		from {transform: translateX(0px) scale(1);}
		to {transform: translateX(-422px) scale(1);}
	}
	@keyframes animalname1 {
		from {transform: translateX(-422px) scale(1);}
		to {transform: translateX(-844px) scale(1);}
	}
	@keyframes animalname2 {
		from {transform: translateX(-844px) scale(1);}
		to {transform: translateX(-1266px) scale(1);}
	}
	@keyframes animalname3 {
		from {transform: translateX(-1266px) scale(1);}
		to {transform: translateX(-1688px) scale(1);}
	}
	
	.bod-right{
		display: flex;
		align-items: center;
		width: 86px;
		height: 24px;
		justify-content: space-around;
	}
	
	
	.bod1{
		color: #FFFFFF;
		background-color: #0D83B2;
		flex: 1;
		text-align: center;
		border-radius: 2px;
		font-size: 12px;
		height: 24px;
		line-height: 24px;
	}
	
	.bod2{
		color: #FFFFFF;
		opacity: 0.8;
		background-color: #00245B;
		flex: 1;
		text-align: center;
		border-radius: 2px;
		font-size: 12px;
		height: 24px;
		line-height: 24px;
	}
</style>
